import React, { useEffect, useState } from "react"
import { Link } from "umi"
import { getDefanceList, getDefenceTable, deleteDefence } from "@/services/modules/defence"
import { ISfenceList, ISfenceTable, ISfenceTableItem } from "@/utils/index"
import { Table, Button, Input, Breadcrumb } from 'antd';
import { EyeOutlined, RestOutlined, CopyOutlined, FormOutlined, SearchOutlined } from '@ant-design/icons';
import "./defence.less"
const status = ['全部', '未开始', '进行中', '已结束']


const planList: React.FC = (props) => {
    const [state, setstate] = useState<ISfenceList[]>([])
    const [num, setNum] = useState('')
    const [Index, setIndex] = useState(0) //下标
    const [fenceTableItem, setFenceTableItem] = useState<ISfenceTableItem[]>([])
    // input 搜索内容
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    const columns = [
        {
            title: '名称',
            dataIndex: 'degenceName',
            align: "center"
        },
        {
            title: '专业',
            dataIndex: 'majorName',
            align: "center"
        },
        {
            title: '班级/计划',
            align: "center",
            render: (rows: ISfenceTableItem) => {
                return <div>
                    <div>{rows.className}</div>
                    <div>{rows.planName}</div>
                </div>
            }
        },
        {
            title: '发起人',
            dataIndex: 'defenceAuthorName',
            align: "center"
        },
        {
            title: '开始/截至时间',
            align: "center",
            render: (rows: ISfenceTableItem) => {
                return <div>
                    <div>{rows.defenceCreateTime}</div>
                    <div>{rows.defenceEndTime}</div>
                </div>
            }
        },
        {
            title: '状态',
            align: "center",
            render: (rows: ISfenceTableItem) => {
                if (rows.defenceStatus === 1) {
                    return <div>
                        未开始
                    </div>
                } else if (rows.defenceStatus === 2) {
                    return <div>
                        进行中
                    </div>
                } else if (rows.defenceStatus == 3) {
                    return <div> 已结束 </div>
                }
            }
        },
        {
            title: '操作',
            align: "center",
            render: (rows: ISfenceTableItem) => {
                if (rows.defenceStatus === 1) {    // 未开始
                    return <div>
                        <EyeOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        <RestOutlined onClick={() => {
                            deleteDefence(rows.defenceId).then(ok => {
                                console.log(ok, "oko")
                                if (ok.code == 200) {  //删除成功
                                    let defenceTable: ISfenceTable = {} as ISfenceTable
                                    if (num) {
                                        defenceTable = { ...defenceTable, pageNum: 1, pageSize: 10, defenceMjorId: num, defenceStatus: Index }
                                    } else {
                                        defenceTable = { ...defenceTable, pageNum: 1, pageSize: 10, defenceMjorId: "", defenceStatus: Index }
                                    }
                                    getDefenceTable(defenceTable).then(ok => {
                                        if (ok.code == 200) {
                                            setFenceTableItem(ok.rows);
                                        }
                                    })
                                }
                            })
                        }} style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                    </div>
                } else if (rows.defenceStatus === 2) {  //进行中
                    return <div>
                        <CopyOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        <Link to={`/teachers/defence/scoreHistory/${rows.defenceId}`}><FormOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} /></Link>
                    </div>
                } else if (rows.defenceStatus == 3) {  //已结束
                    return <div>
                        <Link to={`/teachers/defence/scoreHistory/${rows.defenceId}`}>
                            <FormOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        </Link>
                    </div>
                }
            }
        },
    ];
    //发起请求
    useEffect(() => {
        getDefanceList().then(res => {
            if (res.code == 200) {
                setstate(res.data)
            }
        })
    }, [])
    //发起defenceTable 表格的请求
    useEffect(() => {
        let defenceTable: ISfenceTable = {} as ISfenceTable
        if (num) {
            defenceTable = { ...defenceTable, pageNum: 1, pageSize: 10, defenceMjorId: num, defenceStatus: Index }
        } else {
            defenceTable = { ...defenceTable, pageNum: 1, pageSize: 10, defenceMjorId: "", defenceStatus: Index }
        }
        getDefenceTable(defenceTable).then(ok => {
            if (ok.code == 200) {
                setFenceTableItem(ok.rows);
            }
        })
    }, [num, Index])

    useEffect(() => {
        let defenceTable: ISfenceTable = {} as ISfenceTable
        if (num) {
            defenceTable = { ...defenceTable, pageNum: 1, pageSize: 10, defenceMjorId: num, defenceStatus: Index }
        } else {
            defenceTable = { ...defenceTable, pageNum: 1, pageSize: 10, defenceMjorId: "", defenceStatus: '', searchTitle: searchTitle }
        }
        getDefenceTable(defenceTable).then(ok => {
            if (ok.code == 200) {
                setFenceTableItem(ok.rows);
            }
        })
    }, [num, searchTitle])

    return <div className='box_content'>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>答辩</Breadcrumb.Item>
            <Breadcrumb.Item>答辩管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className='headers'>
            <div className='header1'>
                <div className="header_left1">专业:</div>
                <div className='header_right'>
                    {
                        [{ id: '', name: '全部' }, ...state].map((item => {
                            return <span onClick={e => setNum(item.id)} className={item.id === num ? 'active' : ''} key={item.id}>{item.name}</span>
                        }))
                    }
                </div>
            </div>
            <div className='header2'>
                <div className='header_left2'>状态:</div>
                <ul className='header_right'>
                    {
                        status.map((item, index) => {
                            return <span onClick={e => setIndex(index)} className={index === Index ? 'active' : ''} key={index}>{item}</span>
                        })
                    }
                </ul>
            </div>
        </div>
        <div className='main'>
            <div className='nav'>
                <div></div>
                <span className='spans'><Input className='el-input__inner' placeholder="搜索名称/班级/计划" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} /></span>
                <Link to="/teachers/defence/addDefence">
                    <Button type="primary" style={{ width: "100px", fontSize: "15px", height: "35px", lineHeight: "35px", textAlign: "center", display: "flex", justifyContent: "center", alignItems: "center" }}>+发起答辩</Button>
                </Link>
            </div>
            <Table rowKey='defenceId' dataSource={fenceTableItem} columns={columns as any} />
        </div>
    </div>
}
export default planList